import {
    getCuesSubmitPage, searchTreeOrganization,
} from '@/services/api/api-county';
import { findTagColor } from '@/utils/findTagColor';
import { CheckCircleOutlined, FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDigit } from '@ant-design/pro-form';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Space, Table, Tag, Typography, message } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import DetailsSubmit from '../DetailsCounty/DetailsSubmit';

interface TableSubmitProps {
    onDetails: (id: string, name: string) => void;
    countyKey: string
}

const TableSubmit: React.FC<TableSubmitProps> = (props) => {
    const { onDetails, countyKey } = props;
    const access = useAccess();
    const actionRef = useRef<ActionType>();

    const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

    /**
     * 加载 组织 列表
     * @param key
     */
    const treeOrganizationData = async () => {
        try {
            const response = await searchTreeOrganization({ countyKey });
            if (response.code === 0) {
                setArticleOrganizationState(response.data);
                console.log(response.data);

            }
        } catch (error) { }
    };

    useEffect(() => {
        treeOrganizationData();
    }, []);
    useEffect(() => {
        actionRef.current?.reset()
    }, [countyKey])
    const filter = (inputValue: string, path: DefaultOptionType[]) =>
        path.some(
            (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
        );

    return (
        <ProTable<CuesSubmitData.SubmitPage>
            columns={[
                {
                    title: '报送线索',
                    dataIndex: 'articleName',
                    // copyable: true,
                    ellipsis: true,
                    width: '280px',
                    align: 'center',
                    key: 'articleName',
                    render: (dom, record, _index, action) => {
                        return (
                            <div
                                style={{
                                    textAlign: 'left',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: "nowrap",
                                    overflow: 'hidden'
                                }}
                            >
                                {record.isImage === 1 ? <FileImageOutlined /> : <></>}
                                {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
                                <DetailsSubmit
                                    table='submit'
                                    id={record.id}
                                    name={record.articleName}
                                    onRefurbish={() => {
                                        actionRef.current?.reload();
                                    }}
                                    countyKey={countyKey}
                                />
                            </div>
                        );
                    },
                },
                {
                    title: '选题主题',
                    key: 'topicName',
                    dataIndex: 'topicName',
                    ellipsis: true,
                    search: false,
                    align: 'center',
                    width: '280px',
                    render: (dom, record) => {
                        return (
                            <div
                                style={{
                                    textAlign: 'left',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: "nowrap",
                                    overflow: 'hidden'
                                }}
                            >
                                <Typography.Text ellipsis={true} type="secondary">
                                    <a
                                        onClick={(e) => {
                                            onDetails(record.topicId, record.topicName);
                                        }}
                                        key="topicName"
                                    >
                                        {record.topicName}
                                    </a>
                                </Typography.Text>
                            </div>
                        );
                    },
                },
                // {
                //   title: '选题计划',
                //   key: 'topicPlanName',
                //   dataIndex: 'topicPlanName',
                //   ellipsis: true,
                //   search: false,
                //   align: 'center',
                //   width: '200px',
                //   render: (dom, record) => {
                //     return (
                //       <div
                //         style={{
                //           textAlign: 'left',
                //           textOverflow: 'ellipsis',
                //           whiteSpace: "nowrap",
                //           overflow: 'hidden'
                //         }}
                //       >
                //         <Typography.Text ellipsis={true} type="secondary">
                //           <a
                //             onClick={(e) => {
                //               onDetails(record.topicId, record.topicName);
                //             }}
                //             key="topicPlanName"
                //           >
                //             {record.topicPlanName}
                //           </a>
                //         </Typography.Text>
                //       </div>
                //     );
                //   },
                // },
                {
                    title: '选题方向',
                    dataIndex: 'articleIndustryName',
                    key: 'articleIndustryName',
                    width: '50px',
                    align: 'center',
                    search: false,
                },
                {
                    title: '单位',
                    key: 'articleOrganizationTopName',
                    dataIndex: 'articleOrganizationTopName',
                    search: false,
                    align: 'center',
                    render: (_, row) => (
                        <div
                            style={{
                                textAlign: 'left',
                                marginLeft: '16px'
                            }}
                        >
                            <Tag color={findTagColor(row.articleOrganizationTopName)}>{row.articleOrganizationTopName}</Tag>
                            {row.articleOrganizationName}
                        </div>
                    ),
                },
                {
                    title: '新闻联络人',
                    dataIndex: 'articleAccountName',
                    // copyable: true,
                    ellipsis: true,
                    search: false,
                    width: '70px',
                    align: 'center',
                    key: 'articleAccountName',
                },
                {
                    title: '报送日期',
                    dataIndex: 'createdTimes',
                    key: 'createdTimes',
                    valueType: 'dateRange',
                    hideInTable: true,
                    fieldProps: {
                        allowClear: true,
                        placeholder: ['开始日期', '结束日期'],
                        format: 'YYYY-MM-DD',
                        ranges: {
                            今日: [moment(), moment()],
                            本月: [moment().startOf('month'), moment().endOf('month')],
                            上月: [
                                moment().startOf('month').subtract(1, 'months'),
                                moment().endOf('month').subtract(1, 'months'),
                            ],
                            最近7天: [moment().subtract(6, 'days'), moment()],
                            最近60天: [moment().subtract(59, 'days'), moment()],
                            最近90天: [moment().subtract(89, 'days'), moment()],
                        },
                    },
                },
                {
                    title: '创建时间',
                    dataIndex: 'createdTime',
                    key: 'createdTime',
                    align: 'center',
                    search: false,
                },
                {
                    title: '是否录用',
                    dataIndex: 'isAdopt',
                    key: 'isAdopt',
                    valueType: 'select',
                    width: '80px',
                    align: 'center',
                    fixed: 'right',
                    // hideInTable: !access.线索上报x选题计划x选题列表x收录线索,
                    valueEnum: {
                        0: { text: '未录用' },
                        1: { text: '已录用' },
                    },
                    render: (_, record) => (
                        <Space>
                            <Tag color={record.isAdopt === 0 ? '#F9CF59' : '#1AA15F'} key="isAdopt">
                                {record.isAdopt === 0 ? '未录用' : '已录用'}
                            </Tag>
                        </Space>
                    ),
                },
                {
                    title: '评分',
                    dataIndex: 'score',
                    key: 'score',
                    width: '50px',
                    align: 'center',
                    fixed: 'right',
                    search: false,
                    // hideInTable: !access.线索上报x选题计划x选题列表x评分线索,
                },
                {
                    title: '报送单位',
                    hideInTable: true,
                    // hideInSearch: !access.线索上报x选题计划x选题列表x收录线索,
                    key: 'organizationIds',
                    valueType: 'cascader',
                    colSize: 2,
                    fieldProps: {
                        multiple: true,
                        options: articleOrganizations,
                        showSearch: { filter },
                    },
                },
                // {
                //   title: '刊播情况',
                //   dataIndex: 'isPublish',
                //   key: 'isPublish',
                //   valueType: 'select',
                //   width: '80px',
                //   align: 'center',
                //   // hideInSearch: access.选题报送x配置x分类x媒体,
                //   // hideInTable: access.选题报送x配置x分类x媒体,
                //   valueEnum: {
                //     0: { text: '未刊播' },
                //     1: { text: '已刊播' },
                //   },
                //   render: (_, record) => (
                //     <Space>
                //       <Tag color={record.isPublish === 0 ? '#CCCCCC' : '#1AA15F'} key="isPublish">
                //         {record.isPublish === 0 ? '查看' : '查看'}
                //       </Tag>
                //     </Space>
                //   ),
                // },
            ]}
            actionRef={actionRef}
            request={async (params = {}) => {
                if (params.organizationIds) {
                    const organizationParentIds: string[] = [];
                    let organizationIds: string[] = [];

                    params.organizationIds.forEach((item: string | any[]) => {
                        if (item.length === 1) {
                            organizationParentIds.push(item[0]);
                        } else if (item.length > 1) {
                            organizationIds.push(item[1]);
                        }
                    });
                    organizationParentIds.forEach((id) => {
                        const ids = articleOrganizations.find((item) => item.id === id).children;
                        organizationIds = organizationIds.concat(ids.map((item: any) => item.id));
                    });
                    params.articleOrganizationIds = organizationIds;
                }

                const response = await getCuesSubmitPage({ ...params, countyKey });

                return Promise.resolve({
                    data: response.data.data,
                    total: response.data.total,
                    success: response.code === 0,
                });
            }}
            rowKey="id"
            dateFormatter="string"
            bordered
            search={{
                defaultCollapsed: false,
                span: 8,
                labelWidth: 'auto',
            }}
            sticky
            pagination={{
                showQuickJumper: true,
                showSizeChanger: true,
                defaultPageSize: 20,
            }}
        />
    );
};

export default TableSubmit;
